<template>
    <div class="m-container">
        <AdminHeader></AdminHeader>
        <div class="demo-block">
            <el-timeline class="el-timeline">
                <el-timeline-item v-bind:timestamp="blog.created" placement="top" v-for="blog in blogs" class="el-timeline-item">
                    <el-card >
                        <h4>
                            <router-link :to="{name:'BlogDetail',params :{blogId :blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h4>
                        <p>{{blog.description}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
        <el-pagination class="mpage"
                       background
                       layout="prev, pager, next"
                       :current-page=currentPage
                       :page-size=pageSize
                       :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import AdminHeader from "../components/AdminHeader";

    export default {
        name: "Locks",
        components:{AdminHeader},
        data() {
            return{
                blogs:{},
                currentPage: 1,
                total: 0,
                pageSize: 5
            }
        },
        methods: {
            page(currentPage){
                const _this = this;
                this.$axios.get('/locks?currentPage='+currentPage).then((res) => {
                    _this.blogs = res.data.data.records;
                    _this.currentPage = res.data.data.current;
                    _this.total = res.data.data.total;
                    _this.pageSize = res.data.data.size
                });
            }
        },
        created() {
            this.page(1);
        }
    }
</script>

<style scoped>
    .mpage {
        margin: 0 auto;
        text-align: center;
    }
    .demo-block{
        text-align: left;
    }
</style>